<!doctype html>
<html>
<head>
    <link href="../css/css.css" rel="stylesheet" type="text/css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" type="text/css" href="../css/detial.css"/>
    <link href="../css/css.css" rel="stylesheet" type="text/css">
    <script src="../js/jquery-1.7.1.min.js"></script>
    <script src="../js/layer/2.1/layer.js"></script>
    <title>站内搜索</title>
    <style>
        /*搜索框*/
        .header input{ width:85%; height:33px; float:right; margin-right:4%; border-radius:3px; background-color:#fff; margin-top:6px; padding-left:38px; box-sizing:border-box;  background-size:12px auto; background-repeat:no-repeat; background-position:14px center; color:#191919; font-size:14px; padding-right:16px;}
        /*搜索出的地址*/
        .search_addr{ height:46px; background-color:#fff; position:relative; padding-left:4%; padding-top:6px; box-sizing:border-box;}
        .search_addr h1{ color:#191919; font-size:14px; line-height:17px;}
        .search_addr p{ color:#65646b; font-size:12px; line-height:16px;}
        /*****常见问题********/
        .query{ position:fixed; bottom:0px; width:100%; text-align:center;}
        .query p{ font-size:16px; margin:auto; margin-bottom:20px; position:relative; width:169px;}
        .query img{ width:22px; height:auto; display:inline; position:absolute; top:0px; left:0px;}
        /*****常见问题:弹出层********/
        .query_box{ width:100%; height:280px; background:#fff; position:fixed; left:0; bottom:0; z-index:2000; text-align:center; }
        .query_box .backtrack{ height:40px; line-height:40px; font-size:20px; color:#65646C; padding-left:4%; text-align:left; position:relative; }
        .query_box p{ font-size:15px; color:#65646A; width:244px; text-align:center; margin:auto; margin-top:16px; margin-top:16px; }
        .query_box input{ border:1px #cccccc solid; color:#65646A; font-size:16px; width:60%; border-radius:3px; height:33px; margin-top:16px; padding-left:8px;}
        .query_box h3{ color:#02AFF3; font-size:18px; border-bottom:2px solid #02AFF3; width:104px; margin:auto;}
        .query_box button{ width:92%; height:36px; background:#FF7F00; border-radius:3px; margin-top:20px; color:#fff; font-size:18px;}
        /*****常见问题:弹出层~~提交成功********/
        .succeed{ width:100%; height:100%; position:fixed; background:#7C7C7C; z-index:3000; top:0px; left:0px; }
        .succeed h3{ width:92%; height:36px; background:#fff; font-size:18px; text-align:center; line-height:35px; position:fixed;top:50%; left:4%; color:#191919;border-radius:3px;}
        .touxiang {
            height: 16vh;
        }
    </style>
</head>

<body style="background-color: #f9f9f9;">
<!--header顶部标题-->
<div class="header" style="margin-bottom:14px;" >
    <div class="header_left" onclick="window.history.go(-1)"><img src="../images/return.png"></div>
    <form id="searchBig">
        <input  type="search" placeholder="搜索" id="search" name="name" >
    </form>


</div>
<div id="splists">


</div>

</body>
<script src="../js/serialize-json.js" type="text/javascript"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript">

    $(function(){
        window.onload = function ()
        {
            var input = document.getElementById("search");
            input.focus();
        };
       // var i=0;
        $("#search").bind("input propertychange",function(){

                var divs=$("#splists .listss");
               // console.log(divs);
                if(divs.length>0){
                  //  alert("你好");
                    divs.remove();
                }
                var userData = $('#searchBig').serialize();//serialize() 方法通过序列化表单值，获取值
                userData=decodeURIComponent(userData,true);//防止中文乱码
                userData=DataDeal.formToJson(userData);//转化为json
                searchs(userData);
        });
        function searchs(userData) {
            $.ajax({
                url: urls+"/prize/frontFindByPrizeName",
                type: 'POST',
                data:userData,
                contentType: "application/json",
                success: function (req) {
                    console.log(req);
                    console.log(req.length);
                    if(req.length>0){
                   
                  		 var paths="";
                        var strs ="";
                        for(var i=0;i<req.length;i++){
                          console.log(req[i].cashPrizeState);
                  		  (req[i].name==""||req[i].name==null)? req[i].name="没有标题":req[i].name;
                  		  (req[i].endTime=="" ||req[i].endTime==null)? req[i].endTime="0000-00-00 00:00:00":req[i].endTime;
                  		  paths=urls+req[i].prizeImgurl;
                   		 (req[i].prizeImgurl=="" || req[i].prizeImgurl==null)? paths="../upload/present.jpg":paths;
				
                        
                            strs = strs+ '<div class="listss"> ' +
                                    '<div class="touxiang"><img src="'+paths+'"></div> ' +
                                    '<div class="jianjie"> ' +
                                    '<p><span>'+req[i].name+'</span><span class="userAds">'+"兑换所需奖章"+req[i].medalCount+'枚'+'</span></p> ' +
                                    '<p style="margin-top: 2vh"><span>'+req[i].startTime.substr(0,10)+'</span><span id="jz_center">'+"&nbsp;->&nbsp;"+req[i].endTime.substr(0,10)+'</span></p> ' +
                                    '</div>' +
                                    '<div class="jiantou"><a href="spList.html?id='+req[i].id+'"><img src="../img/arr-right.png"></a></div> ' +
                                    '</div>'
                        }
                        $("#splists").append(strs);
                    }
                },
                error: function () {
                    layer.msg("搜索失败");
                }
            });
        }

    });

</script>
</html>
